<template>
  <div >
      <div style="background-color: white;">
          <div style="padding-top:15px;height: 50px;">
              <MldSearch
                      class="search"
                      @on-search="handleSearch(...arguments)"
              ></MldSearch>
          </div>
          <div style="height: 50px;border:1px solid rgb(244,244,244);box-sizing: border-box;
          display:inline-block;width: 100%;margin-bottom: 5px"
          >
              <el-row style="margin-top: 5px;float: right;margin-right: 20px">
                  <el-button :disabled="selection.length!=1" @click="clickEN(selection[0])">恢复</el-button>
                  <el-button :disabled="selection.length!=1" @click="clickNO(selection[0])">禁用</el-button>
                  <el-button :disabled="selection.length!=1" @click="update(selection[0])">维护菜单</el-button>
                  <el-button @click="addSub(selection[0])" :disabled="!(selection.length===1&&selection[0].upperId=='0')">新增子菜单</el-button>
                  <el-button type="primary" @click="add">新增父菜单</el-button>
              </el-row>
          </div>
      </div>
     <div style="height: 20px">
     </div>
      <div >
          <el-table
                  :data="tableData"
                  ref="table"
                  highlight-current-row
                  v-loading="loading"
                  @row-click="rowSelectionChange"
                  @selection-change="handleSelectionChange"
                  style="width: 100%">
              <el-table-column
                      type="selection"
                      width="55">
              </el-table-column>
              <el-table-column
                      prop="menuId"
                      label="菜单ID"
                     >
              </el-table-column>
              <el-table-column
                      prop="cnName"
                      label="菜单名称"
                      >
              </el-table-column>
              <el-table-column
                      label="菜单类别">
                  <template slot-scope="scope">
                      <span v-if="scope.row.upperId==='0'">父菜单</span>
                      <span v-else>子菜单</span>
                  </template>
              </el-table-column>
              <el-table-column
                      prop="upperId"
                      label="父节点ID">
              </el-table-column>
              <el-table-column
                      prop="path"
                      label="路径">
              </el-table-column>
              <el-table-column
                      prop="component"
                      label="组件">
              </el-table-column>
              <el-table-column
                      prop="icon"
                      label="图标">
              </el-table-column>
              <el-table-column
                      prop="name"
                      label="英文名称">
              </el-table-column>
              <el-table-column
                      prop="stat"
                      label="状态">
                  <template slot-scope="scope">
                    <span v-if="scope.row.stat===0" style="color: #67C23A">启用</span>
                      <span v-else style="color: #909399">禁用</span>
                  </template>
              </el-table-column>
          </el-table>
          <el-pagination
                  @size-change="handleSizeChange(...arguments)"
                  @current-change="handleCurrentChange(...arguments)"
                  :page-sizes="[10, 30, 50]"
                  :page-size="searchForm.pageSize"
                  layout="->, prev, pager, next, sizes"
                  :total="recordsCount"
          >
          </el-pagination>
      </div>
  </div>

</template>

<script>
    import MldSearch from './search'
    import {getMenuInfo}from '@/api/userAPI'
    import {updateMenu}from '@/api/menuApi'
    import MldAdd from './add'
    import MldAddSub from './addsubmenu'
    import MldUpdate from './updateMenu'
    export default {
        components: {
            MldSearch
        },
        data() {
            return {
                recordsCount: 0,
                searchForm:{
                    pageIndex:1,
                    pageSize: 10,
                },
                loading:false,
                selection:[],
                tableData: [],
            }
        },
        methods:{
            clickNO(val){
                let data={stat: 1,menuId: val.menuId}
                updateMenu(data).then(res => {
                    this.$message.success("禁用成功")
                }).catch(e => {
                    this.$message.error({
                        message: '抱歉，维护菜单信息单遇到异常，请重试或联系管理员处理'
                    })
                })
                this.getData()
            },
            clickEN(val){
                let data={stat: 0,menuId: val.menuId}
                updateMenu(data).then(res => {
                    this.$message.success("恢复成功")
                    this.getData()
                }).catch(e => {
                    this.$message.error({
                        message: '抱歉，维护菜单信息单遇到异常，请重试或联系管理员处理'
                    })
                })

            },
            update(row){
                this.$msgBox.showDialog({
                    title: '维护菜单',
                    top:'5vh',
                    content: MldUpdate,
                    width: '50%',
                    parent: this,
                    textCancel:"取消",
                    params: row
                })
            },
            handleRefresh(){
                this.getData()
            },
            addSub(row){
                this.$msgBox.showDialog({
                    title: '新增子菜单',
                    top:'5vh',
                    content: MldAddSub,
                    width: '50%',
                    parent: this,
                    textCancel:"取消",
                    params: row
                })
            },
            add(){
                this.$msgBox.showDialog({
                    title: '新增父菜单',
                    top:'5vh',
                    content: MldAdd,
                    width: '50%',
                    parent: this,
                    textCancel:"取消",
                })
            },
            getData(){
                this.loading=true
                getMenuInfo(this.searchForm).then(res=>{
                    this.tableData=res.data.data
                    this.loading=false
                    this.recordsCount=res.data.recordsCount
                    console.log(this.recordsCount,1111)
                }).catch(e => {
                    this.$message.error({
                        message: '抱歉，读取菜单信息遇到异常，请重试或联系管理员处理'
                    })
                })
            },
            /**
             * 切换分页页数
             */
            handleCurrentChange (val) {
                this.searchForm.pageIndex = val
               //加载数据
                this.getData();
                this.selection = []
            },
            handleSizeChange (val) {
                this.searchForm.pageSize = val
                //加载数据
                this.getData();
                this.selection = []
            },
            rowSelectionChange (row, column) {
                this.$refs.table.toggleRowSelection(row)
            },
            handleSelectionChange(rows){
                this.selection=rows
                if (rows.length > 1) {
                    this.$refs.table.clearSelection()
                    this.$refs.table.toggleRowSelection(rows.pop())
                }
            },
            handleSearch (searchForm, vm) {
                this.searchForm = {... this.searchForm,...searchForm};
                this.getData()
            }
        },
        created() {
            this.getData()
        }
    }
</script>

<stype scoped>
    /* 去掉全选框 */
    ::v-deep .el-table .disabledCheck .cell .el-checkbox__inner {
    display: none;
    }
</stype>
